<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>LayIM 测试</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>


<script src="layui/layui.js"></script>
<script>
    sessionStorage.setItem('label', 'value')
        layui.config({
            layimPath: '../layim/dist/' //配置 layim.js 所在目录
            ,layimAssetsPath: '../layim/dist/layim-assets/' //layim 资源文件所在目录
        }).extend({
            layim: layui.cache.layimPath + 'layim' //配置 layim 组件所在的路径
        }).use('layim', function(layim){ //加载组件
            // 先来个客服模式压压精
            $ = layui.$; //这一行就是使用内置jQuery的关键
            var username;
            var id;
            var status;
            var sign;
            var avatar;
            var websocket;
            $.get("/init/me",function (data){
                username=data.data.mine.username;
                id=data.data.mine.id;
                status=data.data.mine.status;
                sign=data.data.mine.sign;
                avatar=data.data.mine.avatar;
                sessionStorage.setItem('username', username);
                sessionStorage.setItem('id', id);
                sessionStorage.setItem('status', status);
                sessionStorage.setItem('sign', sign);
                sessionStorage.setItem('avatar', avatar);
                sessionStorage.setItem('friendGroup', JSON.stringify(data.data.friend));
                if ('WebSocket' in window) {
                    websocket = new WebSocket("ws://localhost:8080/webSocket/"+username);
                }
                console.log(websocket);

                websocket.onmessage=function (event){
                    // var data=JSON.parse(event.data);
                    console.log(event.data);
                    var ob=JSON.parse(JSON.stringify(eval('('+event.data+')')));
                    console.log(ob);
                    //是否重复申请好友
                    if (ob.hasOwnProperty('e')){
                        console.log("error");
                        //alert
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg(ob.e.toString());
                        });
                    //详细申请
                    }else if (ob.raw.hasOwnProperty('info')) {
                        //选择分组
                        //选择好友分组
                        if (ob.raw.info.type===2){
                            // {"raw":{"toUserAvatar":"/static/image/avatar/avatar(3).jpg","toUserName":"123","info":{"fromUid":-1685970943,"toUid":524476417,"type":2,"time":"Jan 1, 2023 9:02:00 AM"}}} find.html:112:15
                            layim.add({
                                type: 'friend' //friend：申请加好友、group：申请加群
                                ,username: ob.raw.t //好友昵称，若申请加群，参数为：groupname
                                ,avatar: ob.raw.a//头像
                                ,submit: function(group, remark, index){ //一般在此执行Ajax和WS，以通知对方
                                    var d = new Date();
                                    d = new Date(d.getTime() - 3000000);
                                    var date_format_str = d.getFullYear().toString()+"-"+((d.getMonth()+1).toString().length==2?(d.getMonth()+1).toString():"0"+(d.getMonth()+1).toString())+"-"+(d.getDate().toString().length==2?d.getDate().toString():"0"+d.getDate().toString())+" "+(d.getHours().toString().length==2?d.getHours().toString():"0"+d.getHours().toString())+":"+((parseInt(d.getMinutes()/5)*5).toString().length==2?(parseInt(d.getMinutes()/5)*5).toString():"0"+(parseInt(d.getMinutes()/5)*5).toString())+":00";

                                    var data={
                                        fromUid:ob.raw.info.fromUid,
                                        toUid:ob.raw.info.toUid,
                                        type:0,//0用户，1群聊，2用户未确认群组
                                        groupId:group,
                                        time:date_format_str.toString(),
                                        remark:remark
                                    }
                                    websocket.send(JSON.stringify(data));
                                    console.log(group); //获取选择的好友分组ID，若为添加群，则不返回值
                                    console.log(remark); //获取附加信息
                                    layer.close(index); //关闭改面板
                                }
                            });
                        }
                    //    成功发送
                    }else if(ob.hasOwnProperty('suc')){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg("请求发送成功");
                        });
                    }else if(ob==="updateMsg"){
                        $.ajax("/init/msgbox"+id,function (res) {
                            sessionStorage.setItem("addMessageList",JSON.stringify(eval(res.data.list)));
                            layim.msgbox(res.data.list.length);
                            console.log(res);
                        })
                    }
                }
            })
            layim.config({
                brief: false //是否简约模式（如果true则不显示主面板）
                ,init: {
                    url :'init/me/'
                    ,type: 'get' //默认get，一般可不填
                    ,data: {} //额外参数
                } //获取主面板列表信息，下文会做进一步介绍

                //获取群员接口（返回的数据格式见下文）
                ,members: {
                    url: 'init/groups' //接口地址（返回的数据格式见下文）
                    ,type: 'get' //默认get，一般可不填
                    ,data: {} //额外参数
                }

                //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
                ,uploadImage: {
                    url: '' //接口地址
                    ,type: 'post' //默认post
                }

                //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
                ,uploadFile: {
                    url: '' //接口地址
                    ,type: 'post' //默认post
                }
                //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
                ,tool: [{
                    alias: 'code' //工具别名
                    ,title: '代码' //工具名称
                    ,icon: '' //工具图标，参考图标文档
                }]

                ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
                ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
                ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除 该项即可
                // ,myself:

            });
            //监听在线状态的切换事件
            layim.on('online', function (data) {
                console.log(data);
                $.ajax({
                    method: 'post',
                    url: '/edit/status/'+layui.layim.cache().mine.id,
                    cache: true,
                    contentType:"application/json",
                    type: "POST",
                    data: JSON.stringify({
                        id: layui.layim.cache().mine.id,
                        status: data
                    })
                }).then(res => {
                    if (res.code != 0){
                        layer.msg(res.msg)
                    }
                });
                // WS.sendMessage(MSG_CMD.ONLINE_STATUS,{
                //     status: data
                // })
            });
            layim.on('sign', function(value){
                $.ajax({
                    url: "/edit/sign/"+layui.layim.cache().mine.id,
                    cache: true,
                    contentType:"application/json",
                    type: "POST",
                    data: JSON.stringify({sign: value,id:layui.layim.cache().mine.id}),
                    success: function(data) {
                        console.log(data)
                        if(data.data == "success") {
                            layer.open({
                                title: '提示',
                                content: "修改签名成功"
                            });
                            console.log("y")
                        } else {
                            layer.open({
                                title: '提示',
                                content: "修改签名失败"
                            });
                            console.log("n")
                        }
                    }
                })
                //此时，你就可以通过Ajax将新的签名同步到数据库中了。
            });

            $.get("/init/msgbox/"+sessionStorage.getItem('id'),function (res) {
                // var ob=JSON.parse(JSON.stringify(eval('('+event.data+')')));
                sessionStorage.setItem("addMessageList",JSON.stringify(eval(res.data.list)));
                console.log(JSON.parse(sessionStorage.getItem("addMessageList")));
                layim.msgbox(res.data.list.length);
            })
        });
    //
    // });
</script>
<script src="webjars/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="webjars/jquery/3.3.1-1/jquery.min.js"></script>
</body>
</html>